﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - DataSource Serialize</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 2 });
            var spread2 = new GcSpread.Sheets.Spread(document.getElementById("ss1"), { sheetCount: 1 });
            initSpread(spread);
        });

        function initSpread(spread) {
            var spreadNS = GcSpread.Sheets;
            
            spread.isPaintSuspended(true);
            spread.setTabStripRatio(0.6);

            //Sheet data source
            var dataSource = [
                { name: "Yang", age: 24 },
                { name: "Wang", age: 35 },
                { name: "Zhang", age: 20 }
            ];
            var sheet1 = spread.getSheet(0);
            sheet1.setName("Sheet data source");
            sheet1.setDataSource(dataSource);
            //Table data source
            var sheet2 = spread.getSheet(1);
            sheet2.setName("Table data source");
            sheet2.setDataSource(new spreadNS.CellBindingSource({
                name: "Yang",
                age: 24,
                country: "China",
                city: "Xi'an",
                ds: $.extend(true, [], dataSource)
            }));
            sheet2.setBindingPath(0, 1, "name");
            sheet2.setBindingPath(1, 1, "age");
            sheet2.setBindingPath(2, 1, "country");
            sheet2.setBindingPath(3, 1, "city");
            var table = sheet2.addTable("tb1", 4, 1, 1, 1);
            table.bindingPath("ds");
            sheet2.addTableByDataSource("tb2", 9, 1, $.extend(true, [], dataSource));

            sheet2.allowCellOverflow(true);
            sheet2.setValue(4, 4, "Table binding to data source");
            sheet2.setValue(9, 4, "Table created from data source");

            spread.isPaintSuspended(false);

            $("#fromtoJsonBtn").click(function () {
                //ToJson
                var spread1 = $("#ss").data("spread");
                var jsonStr = JSON.stringify(spread1.toJSON({ includeBindingSource: $("#includeBindingSource").prop("checked") }));

                //FromJson
                var spread2 = $("#ss1").data("spread");
                spread2.fromJSON(JSON.parse(jsonStr));
            });
        }
        /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <label>Source:</label>
        <div id="ss" style="width:100%;height:265px;border: 1px solid gray; margin-bottom: 5px;margin-right:10px;"></div>
        <br/>
        <label>Target:</label>
        <div id="ss1" style="width:100%;height:265px;border: 1px solid gray; margin-bottom: 5px;"></div>
        <div class="demo-options">
            <div class="option-row">
                <input type="checkbox" id="includeBindingSource" checked="checked"/>
                <label for="includeBindingSource">includeBindingSource</label>
				
                <input type="button" value="Json Serialize" id="fromtoJsonBtn" title="Serialize source spread to JSON and restore from JSON to target spread."/>
            </div>
        </div>
    </div>
</body>
</html>
